<template>
  <div style="font-weight: bold; font-size: large; margin-bottom: 20px">
    用户反馈列表
  </div>
  <a-select default-value="全部" style="margin-right: 20px" @change="search">
    <a-select-option value="待处理"> 待处理 </a-select-option>
    <a-select-option value="已处理"> 已处理 </a-select-option>
    <a-select-option value="all"> 全部 </a-select-option>
  </a-select>
  <a-range-picker
    :ranges="{
      Today: [moment(), moment()],
      'This Month': [moment(), moment().endOf('month')],
    }"
    @change="onChange"
  />
  <br />
  <a-table
    :dataSource="page.list"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名为action的插槽 -->
    <template #action="{ record }">
      <span v-if="record.f_status == '待处理'">
        <a @click="openSolve(record)">处理反馈</a>
        <a-divider type="vertical" />
      </span>
    </template>
  </a-table>
  <!-- 处理 -->
  <a-modal
    v-model:visible="visible"
    title="处理反馈"
    width="40%"
    height="50%"
    @ok="solve"
    @cancel="exitSolve"
  >
    <div>反馈信息： {{ solveInfo.f_infor }}</div>
    <br />
    <div>反馈图片：</div>
    <a-image
      style="margin-right: 3px; float: left"
      width="33%"
      v-for="image in solveInfo.imageList"
      :src="'data:image/jpeg;base64,' + image"
    />

    <br />
    <br />
    <div>用户邮箱： {{ solveInfo.u_email }}</div>
    <br />
    <div>回复内容</div>
    <a-textarea v-model:value="emailInfor.f_back" :rows="6" />
  </a-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";
import moment from "moment";
const columns = [
  {
    dataIndex: "f_id", //定义传过来的属性名（服务端的属性名）
    title: "反馈ID", //表头项名称
  },
  {
    title: "反馈信息",
    dataIndex: "f_infor",
  },
  {
    title: "状态",
    dataIndex: "f_status",
  },
  {
    title: "操作",
    //slots自定义插槽，即开发者自定义的内容嵌入
    slots: {
      customRender: "action", //定义插槽名称，即以action为名的数据插入该列位置
    },
  },
];
//处理反馈
const visible = ref(false);
const solveInfo = reactive({
  f_id: "",
  u_email: "",
  f_infor: "",
  f_image: "",
  f_status: "",
  imageList: [],
});
const openSolve = (solve) => {
  (solveInfo.f_id = solve.f_id),
    (solveInfo.f_infor = solve.f_infor),
    (solveInfo.f_image = solve.f_image),
    (solveInfo.f_status = solve.f_status),
    (solveInfo.u_email = solve.u_email),
    (solveInfo.imageList = solve.imageAry)((visible.value = true));
};
const emailInfor = reactive({
  f_id: "",
  u_email: "",
  f_back: "",
});
const solve = () => {
  (emailInfor.f_id = solveInfo.f_id), (emailInfor.u_email = solveInfo.u_email);
  if (emailInfor.f_back == null) {
    tip.error("请输入回复内容");
  }
  {
    post("/ops/feedback/email", emailInfor).then((res) => {
      if (res.success) {
        tip.success(res.message);
        getPage(page.value.current);
        exitSolve();
        visible.value = false;
      }
    });
  }
};
const exitSolve = () => {
  (emailInfor.u_email = ""), (emailInfor.f_back = "");
};
let solvedValue = "";
const search = (value) => {
  solvedValue = value;
  if (value == "all") {
    query.f_status = null;
    getPage(page.value.current);
  } else {
    query.f_status = value;
    getPage(page.value.current);
  }
};
//分页处理-start
const query = reactive({}); //定义查询参数
const page = ref({}); //接收服务端返回的分页对象
//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});
//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;
  post("/ops/feedback/showAll", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page
    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;
  getPage(pagination.current);
};

//分页处理-end
//时间

const onChange = (dates, dateStrings) => {
  console.log(solvedValue);
  (query.start_time = moment(dates[0]).format("YYYY-MM-DD HH:mm:ss")),
    (query.f_status = solvedValue),f
    (query.end_time = moment(dates[1]).format("YYYY-MM-DD HH:mm:ss"));
  getPage(page.value.current);
};

//可优化：faq+fedback对输入库是否为空的判断
</script>

<style>
</style>